<template>
  <view class="schedule-card">
    <view class="container" v-if="state == 0">
      <view @click="handlerAddClock" class="item-0"> + </view>
    </view>
    <view class="container" v-if="state == 1">
      <view class="item-1">
        <view
          @touchstart="handlerTouchStart"
          @touchend="handlerTouchEnd"
          @touchmove="handlerTouchMove"
          @click.stop="handlerNavTo"
          class="content"
        >
          <view class="name"> {{ clockItem.taskName }} </view>
          <view class="time" v-if="!clockItem.playing">
            <i style="margin-right: 16rpx" class="iconfont">&#xe740;</i>{{ time }}
          </view>
          <view class="time" v-else>
            <i style="margin-right: 16rpx" class="iconfont">&#xe740;</i>{{ residueTime }}
          </view>
        </view>
        <view
          class="trigger"
          @click="handlerTrigger"
          v-show="!clockItem.playing && allowStop"
        >
          开始
        </view>
        <view
          class="trigger"
          @click="handlerTrigger"
          v-show="clockItem.playing && allowStop"
        >
          停止
        </view>
        <!-- <view
          class="trigger"
          @click="handlerTrigger"
          v-show="clockItem.isAward"
        >
          <image
            style="width: 64rpx; height: 64rpx"
            src="/static/tomato.png"
          ></image>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { formatTime } from "../utils/date";
export default {
  name: "schedule-card",
  props: {
    clockItem: {
      type: Object,
      default: () => ({
        id: "",
        taskName: "",
        target_timestamp: 0,
        now_timestamp: 0,
        playing: false,
      }),
    },
    index: {
      type: Number,
      required: true,
    },
  },
  created() {
    if (!this.clockItem) return;
    this.clockItem = this.clockItem;
    if (!this.clockItem.taskName) {
      this.state = 0;
    } else {
      this.state = 1;
    }
  },
  data() {
    return {
      // 0 点击添加状态， 1 未启动状态
      state: 1,
      touchTimeStamp: 0,
      goalTimeStamp: 1000,
      timer: undefined,
      isTouchMove: false,
    };
  },
  computed: {
    time() {
      if (this.clockItem.now_timestamp === 0) {
        return `${this.clockItem.target_timestamp / 1000 / 60}分钟`;
      } else {
        return formatTime(
          this.clockItem.target_timestamp - this.clockItem.now_timestamp
        );
      }
    },
    residueTime() {
      return formatTime(
        this.clockItem.target_timestamp - this.clockItem.now_timestamp
      );
    },
    allowStop() {
      return true;
    },
  },
  methods: {
    handlerAddClock() {
      this.$emit("add-clock");
    },
    handlerTrigger() {
      this.$emit("trigger", { index: this.index, id: this.clockItem.id });
    },
    handlerNavTo() {
      if (Date.now() - this.touchTimeStamp <= this.goalTimeStamp) {
        console.log("click", "ok");
        this.$emit("nav-to", this.clockItem);
        clearTimeout(this.timer);
      }
    },
    handlerTouchStart() {
      // 用来判断是点击，还是持续接触
      this.touchTimeStamp = Date.now();
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$emit("touch-continue");
      }, this.goalTimeStamp);
    },
    handlerTouchMove() {
      clearTimeout(this.timer);
    },
    handlerTouchEnd() {
      this.touchTimeStamp = 0;
      clearTimeout(this.timer);
    },
  },
};
</script>

<style scoped>
.schedule-card {
  width: 100%;
  height: auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  background: #F8F8F8;
}
.container {
  width: 100%;
}
.item-0 {
  width: 100%;
  height: 164rpx;
  text-align: center;
  line-height: 164rpx;
  color: orange;
  margin-top: 32rpx;
  font-size: 64rpx;
  margin-bottom: 16rpx;
}

.item-1 {
  height: 164rpx;
  width: 100%;
  margin-top: 32rpx;
  display: flex;
}
.item-1 > .content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 32rpx;
}
.item-1 > .content > .name {
  width: 500rpx;
  height: 50%;
  box-sizing: border-box;
  text-indent: 32rpx;
  line-height: 82rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-1 > .content > .time {
  width: 100%;
  height: 50%;
  line-height: 82rpx;
  text-indent: 12rpx;
}
.item-1 > .trigger {
  width: 164rpx;
  height: 100%;
  font-size: 48rpx;
  flex-shrink: 0;
  text-align: center;
  line-height: 164rpx;
  color: orange;
}
</style>